<template>
	<view class="center">
		<view class="bg center">
			<text class="compnay">航天科苑助手</text>
			<view class="banner">
				<u-swiper height="325" :list="bannerList" name="ImgUrl" style="width: 100%"></u-swiper>
			</view>
		</view>
		<view class="center-nav margin-top">
			<view class="center-nav-content">
				<u-notice-bar mode="vertical" :list="notices" type="primary" color="#009688" volume-size="28px"
					bg-color="#fff" style="width:100%" />
			</view>
		</view>

		<view class="center-list">
			<view class="center-nav-title">
				<text>会议应用</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in tongxin" @click="clickGrid(nav.url)">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="center-list">
			<view class="center-nav-title">
				<text>采购应用</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in bangong" @click="clickGrid(nav.url)">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				notices: [],
				tongxin: [{
						icon: "\u{e645}",
						text: '会议室预约',
						desc: '会议使用申请',
						class: 'color-1',
						url: 'pages/meeting/reserveDay/index'
					},
					{
						icon: "\u{e617}",
						text: '预约管理',
						desc: '预约事项管理',
						class: 'color-3',
						url: 'pages/meeting/reserve/index'
					},
					{
						icon: "\u{e600}",
						text: '我的预约',
						desc: '个人预约记录',
						class: 'color-2',
						url: 'pages/meeting/myreserve/index'
					},
					{
						icon: '\u{e7db}', //原代码：&#xe60a;
						text: '值班管理',
						desc: '值班安排维护',
						class: 'color-4',
						url: 'pages/meeting/duty/index'
					}
				],
				bangong: [{
						icon: "\u{e64e}",
						text: '采购记录',
						desc: '采购事项登记',
						class: 'color-1',
						url: 'pages/purch/applytbill/index'
					},
					{
						icon: "\u{e619}",
						text: '我的审批',
						desc: '待办审批事项',
						class: 'color-2',
						url: 'pages/purch/approvepro/index'
					}
				]
			}
		},
        onShow(){
            const token = uni.getStorageSync('token');
            console.log(token,'token')
            if(token !=''){
            	this.getNotice()
                this.getBanner()
            }
        },
		 onLoad() {
			
            
			// if (token) {
				//await this.GetAppMds()
				
			// }
            
		},
		methods: {
			getNotice(){
				var query = {pageNum:1,pageSize:5}
				this.$u.api.getMessage(query).then(res => {
					console.log(res.data.list)
					res.data.list.forEach(item => {
						this.notices.push(item.msgContent)
					})
				})
			},
			getBanner() {
				this.$u.api.getHomeBanner().then(res => {
                    console.log(res,'res')
					this.bannerList = res.data
				})
			},
			clickGrid(url) {
				if (url) {
					this.$u.api.hasPermission({
						pageUrl: url
					}).then(res => {
						if (!res.data) {
							this.$refs.uToast.show({
								title: '此功能无访问权限',
								type: 'warning',
							})
						} else {
							this.$u.route({
								url: url
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '暂未上线，敬请期待',
						type: 'warning',
					})
				}
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4964093_ggidw6lpwpo.ttf?t=1751360457710') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:#5b8cff; //5b8cff 4194fc
	$white-color:#fff;
	$radius:5rpx;
	$border-color:#efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height:100rpx;
	$list-margin:15rpx;

	.bg {
		background: linear-gradient(to bottom, #009688, #4db6ac);
		min-height: 600rpx;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;

		.compnay {
			width: calc(100vw - 80rpx);
			margin: 0 auto 30rpx;
			font-size: 38rpx;
			color: #fff;
			font-weight: 400;
			padding-top: 50rpx;
		}

		.banner {
			width: 100vw;
			height: 300rpx;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;

			image {
				width: calc(100vw - 80rpx);
				margin: 0 auto;
				height: 300rpx;
				border-radius: 20rpx;
			}
		}
	}

	.center-list {
		background-color: #FFFFFF;
		margin: 0 auto 0;
		padding-bottom: $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 30px;
		border-radius: 20rpx;
	}

	.center-nav {
		background-color: #FFFFFF;
		margin: 0rpx auto 50rpx;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}

	.center-nav-title {
		padding: 25rpx 40rpx 0rpx;
		font-size: 34rpx;
		color: #333;
		font-weight: 400;
	}

	.center-nav-content {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.center-nav-item {
			flex-direction: column;
			flex: 1;
			text-align: center;

			image {
				width: 104rpx;
				height: 105rpx;
				margin: 0 auto;
			}

			.center-nav-item-icon {
				color: #333;
				font-size: 48rpx;
				font-weight: 500;
				font-family: texticons;
			}

			.center-nav-item-text {
				color: #666;
				font-size: 30rpx;
				font-weight: 400;
				margin-top: 5rpx;
			}
		}
	}

	.center-list-content {
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		flex-wrap: wrap;

		.center-content-item {
			width: 50%;
			box-sizing: border-box;
			padding: 25rpx 0rpx;
			align-items: center;

			.center-content-item-icon {
				color: #fff;
				font-size: 48rpx;
				font-weight: 500;
				font-family: texticons;
				border-radius: 20rpx;
				padding: 20rpx;
			}

			.center-content-item-info {
				flex-direction: column;
				margin-left: 20rpx;

				.center-content-item-text {
					color: #666;
					font-size: 32rpx;
					font-weight: 400;
				}

				.center-content-item-desc {
					color: #888;
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}

	.margin-top {
		margin-top: -140rpx;
	}

	.color-1 {
		background-image: linear-gradient(#72aefe, #4896ff);
	}

	.color-2 {
		background-image: linear-gradient(#5ff9d7, #39debd);
	}

	.color-3 {
		background-image: linear-gradient(#ffd155, #ffbc04);
	}

	.color-4 {
		background-image: linear-gradient(#ff808b, #ff6872);
	}

	/deep/ uni-swiper {
		width: 90%;
		margin: 0 auto;
		border-radius: 30rpx;
	}
</style>
